<template>
  <div class="main_wrap">
    <a-list :grid="{ gutter: 16, column: 4 }" :data-source="questionData">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-card :title="item.title">
          <div class="Task_Content" v-if="index != questionData.length - 1">
            <div>发布时间：{{ item.createTime }}</div>
            <div>结束时间：{{ item.endTime }}</div>
            <div>
              完成状态：
              <a-tag v-if="item.status" color="green">已发布</a-tag>
              <a-popconfirm
                v-else
                title="是否要发布测试？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirm(item.id)"
              >
                <a-tag color="red" style=""> 待发布 </a-tag>
              </a-popconfirm>
            </div>
            <div class="btn_group">
              <a-button
                style="background-color: #e6a23c; color: white"
                @click="editTest(item)"
                >编辑</a-button
              >
              <a-popconfirm
                title="确定要删除这条题目？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="removeTest(item.id)"
              >
                <a-button type="danger">删除</a-button>
              </a-popconfirm>
            </div>
          </div>
          <div class="Task_Content add_test" v-else @click="addTest">
            <img
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607083176890&di=2f1ed22fbb9b97269cc36664765764f7&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D988053700%2C539287391%26fm%3D193"
              alt=""
            />
          </div>
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      questionData: [],
    };
  },
  methods: {
    ...mapMutations("TeacherGroup", [
      "addCreatePanesData",
      "editCreatePanesData",
      "setEditTopicData",
      "setEditTopicId",
      "setEditTopicTitle",
    ]),
    //发布测试
    confirm(id) {
      this.$api.PublishExercise({ id }).then((res) => {
        if (res.data.result) {
          this.$message.success("发布成功");
          this.getTestData();
          //signalr通知
        }
      });
    },
    editTest(data) {
      if (!this.isTestPage) {
        this.getEditTopicData(data.id, data.title);
        this.editCreatePanesData();
      } else this.$message.warning("您已经存在了一个测试页面");
    },
    removeTest(id) {
      this.$api.DeleteExerciseByID({ id }).then((res) => {
        if (res.data.result) {
          this.$message.success("删除成功");
          this.getTestData();
        }
      });
    },
    addTest() {
      if (!this.isTestPage) {
        this.addCreatePanesData();
      } else this.$message.warning("您已经存在了一个测试页面");
    },
    getTestData() {
      this.$api.GetExercises({ id: this.selectedKeys[0] }).then(({ data }) => {
        var temp = data.result.map((item) => {
          return {
            id: item.id,
            title: item.name,
            status: item.publishStatus,
            createTime: item.createTime,
            endTime: item.endTime,
          };
        });
        temp.splice(temp.length, 0, { title: "添加测试" });
        this.questionData = temp;
      });
    },
    getEditTopicData(id, name) {
      this.$api.TeacherGetTopicsByExerciseID({ id }).then(({ data }) => {
        this.setEditTopicData(data.result.map((item) => item.name));
        this.setEditTopicId(id);
        this.setEditTopicTitle(name);
      });
    },
  },
  computed: {
    ...mapState("Teacher", ["selectedKeys"]),
    ...mapState("TeacherGroup", ["isTestPage"]),
  },
  created() {
    this.getTestData();
  },
};
</script>
<style lang="less" scoped>
.btn_group {
  display: flex;
  justify-content: flex-end;
  .ant-btn {
    margin: 0 1%;
  }
}
.add_test {
  text-align: center;
  img {
    width: 90px;
  }
  &:hover {
    cursor: pointer;
  }
}
.ant-tag {
  &:hover {
    cursor: pointer;
    transform: scale(1.1);
  }
}
</style>
